<template>
    <view class="gift-card-wrapper">
        <view class="header-wrapper">
            <view class="header"/>
            <view class="gift-card-exchange">
                <view class="title">礼品卡券兑换</view>
                <view class="input-wrapper">
                    <input v-model="vipCardGiftLogCode" placeholder-style="color: #999;" class="uni-input" placeholder="请输入礼品卡券"/>
                    <view class="close one one-close" @tap.stop="clearHandle" v-if="!!vipCardGiftLogCode"></view>
                </view>
                <view class="confirm-btn" @tap="confirmExchange">确认兑换</view>
            </view>
        </view>
        <mescroll-uni
                top="500"
                @down="downCallback"
                @up="upCallback"
                :down="downOption"
                :up="upOption"
                class="mescroll-flex"
                @init="mescrollInit"
        >
            <view style="padding: 0 30rpx;">
                <view  v-for="(item, index) in giftCards" :key="index" class="vip-card">
                    <vip-card :item="item" :type="1" @watchDetail="watchDetail" v-if="item.status === 1"/>
                    <active-card
                            v-if="item.status === 2"
                            :item="item"
                            @updateData="updateData"
                    />
                    <vip-card v-if="item.status === 3" :item="item" :type="3" @watchDetail="watchDetail"/>
                </view>
            </view>
        </mescroll-uni>
        <gw-show-modal v-model="showModal" type="custom" width="560px" height="494px">
            <view class="exchange-gifts">
                <image :src="'https://img.thumbrary.com/'+ (exchangeStatus ?'gifts-exchange-success':'gifts-exchange-failer') + '.png'"/>
                <view class="exchange-title">{{exchangeStatus?'恭喜您，领取成功':'很遗憾，领取失败'}}</view>
                <view class="exchange-tips">{{exchangeStatus?'激活之后就可以借阅绘本了':'该券码无效，请重新输入'}}</view>
                <view class="exchange-btn" @tap.stop="closeModal">我知道了</view>
            </view>
        </gw-show-modal>
    </view>
</template>

<script>
    import service from '@/service';
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import gwShowModal from '@/pages/components/gw-show-modal';
    import VipCard from '../vip/vip-card'
    import activeCard from '../vip/active-card';
    export default {
        name: "index",
        data(){
            return{
                vipCardGiftLogCode: '',
                showModal: false,
                exchangeStatus: false,
                page: 1,
                limit: 10,
                giftCards: [],
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    offset: 130,
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null
            }
        },
        onLoad(){
            // this.inquiryGiftCards();
        },
        components: {
            MescrollUni, VipCard, activeCard, gwShowModal
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            downCallback(mescroll){
                this.giftCards = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.inquiryGiftCards();
            },
            updateData(){
                this.type = 1;
                setTimeout(()=>{
                    this.inquiryGiftCards();
                }, 500)
            },
            watchDetail(){
                uni.navigateTo({
                    url: '../vip/vip-card-detail'
                })
            },
            clearHandle(){
                this.vipCardGiftLogCode = ''
            },
            // 领取礼品卡
            confirmExchange(){
                if(!this.vipCardGiftLogCode){
                    uni.showToast({
                        title: `请输入卡券呦！`,
                        duration: 2500,
                        icon: 'none'
                    })
                    return;
                }
                uni.showLoading({
                    title: ''
                });
                service.mineService.getGiftCards({
                    data: {
                        vipCardGiftLogCode: this.vipCardGiftLogCode,
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.result.status) {
                            this.showModal = true;
                            this.exchangeStatus = true;
                            this.inquiryGiftCards();
                        } else {
                            this.showModal = true;
                            this.exchangeStatus = false;
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                })
            },
            closeModal(){
                this.showModal = false;
            },
            // 获取列表
            inquiryGiftCards(){
                uni.showLoading({
                    title: '加载中'
                });
                service.mineService.inquiryGiftCards({
                    data: {
                        page: this.page,
                        limit: this.limit
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.page > 1 ? this.giftCards.push(...data) : this.giftCards = data;
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .gift-card-wrapper{
        .header-wrapper{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            height:440rpx;
            background: #ffffff;
            z-index: 10;
        }
        .header{
            height:262rpx;
            background: #2BA8FC;
        }
        .gift-card-exchange{
            position: absolute;
            top: 100rpx;
            width:690rpx;
            height:344rpx;
            background:#FFFFFF;
            box-shadow:0rpx 3rpx 20rpx rgba(0,0,0,0.08);
            border-radius:10rpx;
            left: 30rpx;
            padding: 38rpx 43rpx;
            box-sizing: border-box;
            .title{
                text-align: center;
                margin-bottom: 38rpx;
            }
            .input-wrapper{
                position: relative;
                height:68rpx;
                .close{
                    position: absolute;
                    right: 24rpx;
                    left: auto;
                    z-index: 10;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 44rpx;
                    height: 44rpx;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    background: #c0c0c0;
                }
            }
            .uni-input{
                padding-left: 38rpx;
                padding-right: 30rpx;
                border:1px solid rgba(229,229,229,1);
                box-sizing: border-box;
                height:68rpx;
            }
            .confirm-btn{
                margin-top: 40rpx;
                height:81rpx;
                text-align: center;
                line-height: 81rpx;
                color: #ffffff;
                background:rgba(43,168,252,1);
                border-radius:10rpx;
            }
        }
        .tap-content{
            width: 690rpx;
            margin-left: -40rpx;
            margin-top: 40rpx;
        }
        .vip-card{
            margin-bottom: 40rpx;
        }
        .exchange-gifts{
            padding: 45rpx 95rpx;
            box-sizing: border-box;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 8rpx;
            image{
                width: 140rpx;
                height: 140rpx;
            }
            .exchange-title{
                font-size: 32rpx;
                font-weight: bold;
                margin-top: 35rpx;
            }
            .exchange-tips{
                color: #999999;
                margin-top: 12rpx;
            }
            .exchange-btn{
                width:370rpx;
                height:80rpx;
                background:rgba(43,168,252,1);
                border-radius:8rpx;
                text-align: center;
                line-height: 80rpx;
                color: #ffffff;
                font-weight:bold;
                margin-top: 30rpx;
            }
        }
    }
</style>